<template>
  <div>
    <el-table
        row-key="id"
        :data="newsData"
        border style="width: 100%"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}">

      <el-table-column prop="title" label="标题" width="800"/>
      <el-table-column prop="editor" label="责任编辑" width="180"/>
      <el-table-column prop="createdTime" label="创建时间" width="220"/>
      <el-table-column align="center" label="操作" prop="operate" width="250">
        <template v-slot="scope">
          <el-button
              icon="Edit"
              size="small" type="primary"
              @click="this.linkTo(scope.row)"
          >查看详情
          </el-button>
          <el-button
                  icon="Delete"
                  size="small" type="danger"
                  @click="this.deleteItem(scope.row)"
                  v-if="this.isTeacher()"
          >删除新闻
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <div class="footer">
    <el-pagination
        small
        :pager-count="5"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[50, 100 , 200 , 500,1000,2000,5000]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
import request from "@/util/request.js";
import {NEWS} from "@/util/config.js";
export default {
  data() {
    return {
      newsData: [],
      pageNum: 1, //页码
      pageSize: 50,  //页长
      total: 0,  //总表长
      roleNo: [],
    };
  },
  //初始化加载
  created() {
    this.setRoleNo()
    this.getData()
  },
  mounted() {

  },
  methods: {
    // 用户角色赋值
    setRoleNo() {
      let role = JSON.parse(localStorage.getItem("user"))["roleNo"]
      if (role.includes(",")) {
        this.roleNo = role.split(',')
      } else {
        this.roleNo.push(role)
      }
    },
    isTeacher() {
      console.log(this.roleNo)
      for (let item of this.roleNo) {
        if (NEWS.includes(item)) {
          return true
        }
      }
      return false
    },
    linkTo(scope) {
      this.$router.push("/news?id=" + scope.id)
    },
    deleteItem(scope) {
        // 获取要删除的通知的 ID
        const id = scope.id;
        this.$confirm('此操作将永久删除该通知, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            // 确认删除，向服务器发送请求
            request.get(`/related_news/delete/${id}`)
                .then(() => {
                    // 删除成功，重新获取数据
                    this.getData();
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                })
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });
        });
    },
    renderHeader(h, {column}) {
      // 隐藏表头内容
      column.realLabel = column.label;
      column.label = '';
      // 返回一个自定义的表头单元格
      return h('el-table-column', {props: {width: '50'}}, column.realLabel);
    },
    // 获取所有结束活动
    getData() {
      request.get("/related_news/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize).then(res => {
        if (res.data.code === '200') {
          for (let key in res.data.data) {
            if (key === "records") {
              this.newsData = res.data.data[key];
            } else if (key === "total") {
              this.total = res.data.data[key];
            }
          }
        } else {
        }
      })
    },
    //表尾分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getData();
    },
  }
};

</script>


<style scoped>
</style>
